<template>
	<view class="con">
		<view class="box">
			<view class="title">
				向商家付款
			</view>
			<view class="codebox">
				<view class="qrimg">
				   <tki-qrcode v-if="ifShow" cid="qrcode1" ref="qrcode" :val="val"
				   :size="size" :unit="unit" :background="background" :foreground="foreground"
				    :pdground="pdground" :icon="icon" :iconSize="iconsize" :lv="lv" :onval="onval" 
				    :loadMake="loadMake" :usingComponents="true"  @result="qrR" />
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import tkiQrcode from "@/components/tki-qrcode/tki-qrcode.vue"
	export default{
		components: {tkiQrcode},
		data(){
			return{
				url:"",
				ifShow:true,
				val: '', // 要生成的二维码值
				size: 400, // 二维码大小
				unit: 'upx', // 单位
				background: '#ffffff', // 背景色
				foreground: '#333333', // 前景色
				pdground: '#333333', // 角标色
				icon: '', // 二维码图标
				iconsize: 170, // 二维码图标大小
				lv: 3, // 二维码容错级别 ， 一般不用设置，默认就行
				onval: false, // val值变化时自动重新生成二维码
				loadMake: true, // 组件加载完成后自动生成二维码
				src: '' ,// 二维码生成后的图片地址或base64
				recommendCode:''
			}
		},
		onLoad(e) {
			this.val="1234561sdfdsfdggdfgdfgfsgdf11111111"
		},
		methods:{
			qrR(e){
				console.log(e)
			}
		}
	}
</script>

<style>
	.codebox{
		display: flex;
		justify-content: center;
		padding-top: 100rpx;
	}
	.title{
		font-size: 32rpx;
		font-family: PingFang SC;
		font-weight: 400;
		line-height: 105rpx;
		color: #F09238;
		opacity: 1;
		height:105rpx ;
		padding-left: 40rpx;
		border-bottom: 1px #DFDFDF solid;
	}
	.box{
		width: 690rpx;
		height: 733rpx;
		background: #FFFFFF;
		opacity: 1;
		margin-left: 30rpx;
	}
	.con{
		background-color: #f6f6f6;
		min-height: 100vh;
		padding-top: 100rpx;
	}
</style>
